<template lang="jade">
  form
    ul
      li
        .item-content
          .item-media
            i.fa.fa-user
          .item-inner.with-button
            .item-title 手机号
            .item-input
              input(type="tel", placeholder="手机号")
            .item-button
              button(type="button", @click="getValiCode()") {{getValiCodeText}}
      li
        .item-content
          .item-media
            i.fa.fa-user
          .item-inner
            .item-title 验证码
            .item-input
              input(type="tel", placeholder="验证码")
        //- li.button
        //-   a.button-block 登录

    .content-block
      .button-block
        a.button.center(href="javascript:;", @click="login") 登录

</template>

<style lang="less">
  @import "../less/libs/color-vars.less";
  @import "../less/libs/mixins.less";
  * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
  }
  input {
    outline: 0;
    appearance: none;
    box-sizing: border-box;
    border: none;
    background: none;
    border-radius: 0 0 0 0;
    box-shadow: none;
    display: block;
    padding: 0px;
    margin: 0;
    width: 100%;
    height: 43px;
    color: #000;
    font-size: 17px;
    font-family: inherit;
  }

  .content-block {
    margin-top: 2rem;
    .button-block {
      &:before, &:after {
        content: '';
        display: inline-block;
        width: 21%;
      }
      a.button {
        text-decoration: none;
        line-height: 1rem;
        text-align: center;
        padding: 0.5rem 1rem;
        border-radius: 1rem;
        display: inline-block;
        color: #fff;
        background-color: @themeColor
      }
      a.button.center {
        width: 50%;
      }
    }
  }
  form {
    ul li {
      position: relative;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: darken(#fff, 10%);
        height: 1px;
        width: 100%;
      }
      .item-content {
        > div {
          display: inline-block;
        }
        .item-media {
          width: 10%;
          text-align: center;
        }
        .item-inner {
          width: 90%;
          position: relative;
          > div {
            display: inline-block;
          }
          .item-title {
            width: 20%
          }
          .item-input {
            width: 80%;
            input {
              width: 95%;
            }
          }
        }
        .item-inner.with-button {
          .item-input {
            width: 50%;
            input {
              width: 100%;
            }
          }
          .item-button {
            width: 30%;
            button {
              width: 100%;
              font-size: 0.9rem;
              color: lighten(#000, 10%);
              outline: 0;
              border: 0;
              background-color: #fff;
            }
          }
        }
      }
      a.button-block {
        text-decoration: none;
        display: block;
        width: 100%;
        text-align: center;
        line-height: 2.5rem;
        height: 2.5rem;
      }
    }
    ul > li.button {
      margin-top: 2rem;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background-color: darken(#fff, 10%);
        height: 1px;
        width: 100%;
      }
    }
  }
</style>

<script>
  export default {
    props: {
      getValiCodeText: {
        type: String,
        default() {
          return '获取验证码'
        }
      }
    },
    methods: {
      getValiCode() {
        var counter = 5
        var timer
        if (true) {
          this.getValiCodeText = `剩余${counter--}秒`
          timer = setInterval(() => {
            this.getValiCodeText = `剩余${counter--}秒`
            if (counter < 0) {
              clearInterval(timer)
              this.getValiCodeText = '获取验证码'
            }
          }, 900)
        }
      },
      login() {
        console.log(2);
      }
    }
  }
</script>
